<template>
   <div class="container">
      <div class="mian-content">
         <div class="left-box">
            <div class="top-logo">
               <img src="../../public/logo.png">
            </div>
            <div class="form">
               <form action="#">
                  <div class="form-item">
                     <div class="form-input">
                        <input type="text" placeholder="请输入你的手机号" v-model="ruleForm.phone" @blur="checkPhone">
                     </div>
                     <div class="err-message">
                        <el-alert :title="errorMessage.phone" type="warning" show-icon :closable="false"
                           v-if="showMessage.phone" />
                     </div>
                  </div>
                  <div class="form-item">
                     <div class="form-input-code">
                        <input type="text" placeholder="请输入验证码" v-model="ruleForm.code" @blur="checkCode">
                        <button @click="getCode" :disabled="disabled" type="button">
                           <span v-if="isShow">验证码</span>
                           <span v-else>{{ timeValue }}s获取</span>
                        </button>
                     </div>
                     <div class="err-message">
                        <el-alert :title="errorMessage.code" type="warning" show-icon :closable="false"
                           v-if="showMessage.code" />
                     </div>
                  </div>
               </form>
            </div>
            <div class="login" @click="submitForm">
               <button type="button">登录</button>
            </div>
         </div>
         <div class="right-box">
            <img src="../../public/back-logo.png">
         </div>
      </div>
      <!-- 微信登录弹框 -->
      <!-- <el-dialog v-model="dialogVisible" width="30%" center align-center>
         <div class="weixin-title">微信登录</div>
         <div id="qrcode" class="erweima" ref="qrcode"></div>
         <div class="bottom-message">
            使用微信扫一扫，并关注“旺黔诚”微信公众号
         </div>
         <template #footer>

         </template>
      </el-dialog> -->
   </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { login, sendCode } from '../api/login'
import { type FormInstance, type FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import useLoginStore from '../store/index'
import { storeToRefs } from 'pinia';
const errorMessage = reactive({
   phone: "",
   code: ""
})
const showMessage = reactive({
   phone: false,
   code: false
})
//失去焦点验证手机号
const checkPhone = () => {
   if (ruleForm.phone === '') {
      showMessage.phone = true
      errorMessage.phone = '手机号不能为空'
   } else if (!regPhone.test(ruleForm.phone)) {
      showMessage.phone = true
      errorMessage.phone = '手机号格式不对'
   } else {
      showMessage.phone = false
      return true
   }
}

//失去焦点验证验证码
const checkCode = () => {
   if (ruleForm.code == '') {
      showMessage.code = true
      errorMessage.code = '验证码不能为空'
   } else {
      showMessage.code = false
      return true
   }
}
const ruleForm = reactive({
   phone: "",
   code: ""
})
const ruleFormRef = ref<FormInstance>()
//验证手机号
const regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
const validatePhone = (rule: any, value: any, callback: any) => {
   if (value === '') {
      callback(new Error('手机号不能为空'))
   } else if (!regPhone.test(value)) {
      callback(new Error('手机号格式不对'))
   } else {
      callback()
   }
}
//验证码校验
const validateCode = (rule: any, value: any, callback: any) => {
   if (value === '') {
      callback(new Error('验证码不能为空'))
   } else if (+value !== codeValue.value) {
      callback(new Error('验证码不正确'))
   } else {
      callback()
   }
}
//获取验证码
const codeValue = ref(undefined)
const getCode = () => {
   if (ruleForm.phone === '') {
      return ElMessage.error('手机号不能为空')
   }
   sendCode({ phone: ruleForm.phone }).then((res: any) => {
      if (res) {
         ElMessage({
            message: '验证码已发送，请注意查收',
            grouping: true,
            type: 'success',
         })
         codeValue.value = res
         getTimer()
      }
   })

}
//验证码倒计时获取
const isShow = ref(true)
const timer = ref(0)
const timeValue = ref(60)
const disabled = ref(false)
const getTimer = () => {
   disabled.value = true
   isShow.value = false
   timer.value = setInterval(() => {
      if (timeValue.value < 1) {
         clearInterval(timer.value)
         timeValue.value = 60
         disabled.value = false
         isShow.value = true
      }
      timeValue.value--
   }, 1000)
}
const rules = reactive<FormRules<typeof ruleForm>>({
   phone: [{ validator: validatePhone, trigger: 'blur' }],
   code: [{ validator: validateCode, trigger: 'blur' }]
})
//登录验证
const store: any = useLoginStore()
const { userInfo } = storeToRefs(store)
const router = useRouter()
const submitForm = () => {
   if (!checkPhone() || !checkCode()) return
   login({ phone: ruleForm.phone, code: ruleForm.code }).then((res: any) => {
      if (res.code === 200) {
         localStorage.setItem('token', JSON.stringify(res.data || {}))
         userInfo.value = res.data || {}
         console.log(userInfo.value)
         console.log(userInfo.value, '登录的用户信息')
         router.push({
            path: "/"
         })
         ElMessage.success('登录成功')
      } else {
         ElMessage.error(res.msg)
      }
   })
}
</script>

<style scoped lang="scss">
.container {
   height: 100vh;
   background: #2A3342;
   display: flex;
   justify-content: center;
   align-items: center;

   .mian-content {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      background: #ffffff;

      .right-box {
         height: 359px;
         width: 300px;

         img {
            width: 100%;
            height: 100%;
         }
      }

      .left-box {
         padding: 0 20px;
         padding-bottom: 20px;

         .top-logo {
            margin-top: -20px;
            display: flex;
            justify-content: center;

            img {
               width: 48px;
            }
         }

         .login {
            button {
               width: 100%;
               display: block;
               background: #00C667;
               color: #ffffff;
            }
         }

         .form {
            padding-top: 20px;

            .form-item {

               .form-input input,
               .form-input-code input {
                  border-radius: 5px;
                  border: 1px solid #E4E7ED;
                  height: 100%;
                  padding-left: 14px;
               }

               .form-input input:focus,
               .form-input-code input:focus {
                  border: 1px solid #00C667;

               }

               .form-input {
                  height: 39px;

                  input {
                     box-sizing: border-box;
                     width: 100%;
                  }
               }

               .form-input-code {
                  height: 39px;
                  display: flex;
                  justify-content: space-between;

                  button {
                     margin-left: 10px;
                     background: #00C667;
                     font-size: 14px;
                     font-weight: 400;
                     color: #ffffff;
                  }

                  input {
                     box-sizing: border-box;
                  }
               }

               .err-message {
                  height: 24px;

                  .el-alert {
                     padding: 0;
                     padding-left: 10px;
                  }
               }
            }
         }
      }
   }
}</style>